<script setup lang="ts">
import {onMounted, ref, onBeforeUnmount} from "vue";
import {useRoute, useRouter} from "vue-router";
import {placeOrder, getKlineAll, getProductDetail, getProductPriceDetail} from "@/api/productApi.ts";
import {useStore} from "vuex";
import {getWebsiteConfig} from "@/api/homeApi.ts";
import {Vue3Marquee} from "vue3-marquee";
import noticeImg from '../../assets/images/notice.png';
import {init} from "klinecharts";
import {showToast} from "vant";
import {useI18n} from "vue-i18n";

const route = useRoute();
const router = useRouter();
const store = useStore();
const {t} = useI18n()
const id = route.params.id;

//动态金额
const dynamicsPrice = ref({
  price: 0,
  zhangdie: 0,
  zhangfu: 0,
  maizhang: 0,
  maidie: 0,
  maizhangXhx: 0,
  maidieXhx: 0
});

const fetchProductPriceData = () => {
  getProductPriceDetail({
    id: id
  }).then(res => {
    //获取动态金额
    dynamicsPrice.value.price = res.data.price;
    dynamicsPrice.value.zhangdie = res.data.zhangdie;
    dynamicsPrice.value.zhangfu = res.data.zhangfu;
    dynamicsPrice.value.maizhang = res.data.maizhang;
    dynamicsPrice.value.maidie = res.data.maidie;
    dynamicsPrice.value.maizhangXhx = res.data.maizhang_xhx;
    dynamicsPrice.value.maidieXhx = res.data.maidie_xhx;
  })
}

const intervalDynamicsPriceId = ref(0);
const startDynamicsPriceUpdating = () => {
  intervalDynamicsPriceId.value = setInterval(() => {
    fetchProductPriceData();
  }, 1000);
}

const websiteConfig = ref([]);
const fetchWebsiteConfigData = () => {
  getWebsiteConfig().then(res => {
    websiteConfig.value = res.data;
  })
}

/**
 * K线图
 */
let chart: any;

//获取K线数据
const klineData = ref([])
const fetchKlineData = () => {
  getKlineAll({
    id: id,
    num: 60,
    interval: klineTimeActive.value
  }).then(res => {
    klineData.value = res.data;
    chart.applyNewData(res.data)
  })
}

const klineTimeActive = ref(1);
const klineTimes = ref([
  {label: '1M', value: 1},
  {label: '5M', value: 5},
  {label: '15M', value: 15},
  {label: '30M', value: 30},
  {label: '1H', value: 60},
  {label: '1D', value: 'd'}
]);
//切换K线图时间
const handleKlineTime = (item: any) => {
  klineTimeActive.value = item.value;
  fetchKlineData();
  chart.applyNewData(klineData.value);
};

const placeOrderState = ref(false);
const step1 = ref(true);
const step2 = ref(false);
const step3 = ref(false);

//提交表单
const form = ref({
  time: '',//时间
  scale: '',//倍率
  money: '',//购买金额
  type: 1//1涨，2跌
})

const orderTimes = ref([]);
const orderScales = ref([]);
const orderMoneys = ref([]);
const balance = ref(0);
const product = ref([]);
const productData = ref([]);
const countdown = ref(0);

//获取商品详情
const fetchProductData = () => {
  getProductDetail({
    id: id
  }).then(res => {
    product.value = res.data.product;
    productData.value = res.data.product_data;
    orderTimes.value = res.data.times;
    orderScales.value = res.data.scales;
    orderMoneys.value = res.data.moneys;
    balance.value = res.data.balance;

    store.commit('switchNavbarTitle', res.data.product.product_name);
  })
}

//显示下单弹窗
const showPlaceOrder = (type: any) => {
  form.value.type = type;
  form.value.money = orderMoneys.value[0];
  form.value.time = orderTimes.value[0];
  form.value.scale = orderScales.value[0];

  placeOrderState.value = true;
}
//关闭下单弹窗
const closePlaceOrder = () => {
  form.value.time = '';
  form.value.scale = '';
  form.value.money = '';
  form.value.type = 1;

  placeOrderState.value = false;
}

//选择投注时间
const handleOrderTime = (time: any, scale: any) => {
  form.value.time = time;
  form.value.scale = scale;
}
//选择投注金额
const handleOrderMoney = (money: any) => {
  form.value.money = money;
}

//跳转到持仓页面
const toOrder = () => {
  router.push({name: 'order'})
}

//下单后倒计时，每秒更新一次数字
const intervalCountdownId = ref(0);
const startCountdownUpdating = () => {
  step1.value = false;
  step2.value = true;
  intervalCountdownId.value = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value -= 1; //每秒减少1
    } else {
      step2.value = false;
      step3.value = true;
      clearInterval(intervalCountdownId.value); //当倒计时结束时清除定时器
    }
  }, 1000);
}

//继续下单
const continueOrder = () => {
  step2.value = false;
  step3.value = false;
  step1.value = true;
}

//提交订单
const submit = () => {

  if (form.value.type == '') {
    showToast(t('placeholder.typeEmpty'));
    return false;
  }

  if (form.value.money == '') {
    showToast(t('placeholder.moneyEmpty'));
    return false;
  }

  if (form.value.time == '') {
    showToast(t('placeholder.timeEmpty'));
    return false;
  }

  if (form.value.scale == '') {
    showToast(t('placeholder.scaleEmpty'));
    return false;
  }

  store.state.loadingState = true;
  countdown.value = form.value.time * 60;
  placeOrder({
    type: form.value.type,
    money: form.value.money,
    scale: form.value.scale,
    id: id,
    new_price: productData.value.price,
    time: form.value.time * 60
  }).then(res => {
    showToast(res.msg);
    store.state.loadingState = false;
    if (res.code == 0) {
      startCountdownUpdating();
    }
  })
}

// 更新日期和时间的函数
const currentDate = ref('');// 存储日期
const currentTime = ref('');// 存储实时时间
const updateDateTime = () => {
  const now = new Date();
  currentDate.value = now.toLocaleDateString();
  currentTime.value = now.toLocaleTimeString();
};
const intervalTimeId = ref(0);
const startTimeUpdating = () => {
  intervalTimeId.value = setInterval(() => {
    updateDateTime();
  }, 1000);
}

onMounted(() => {
  fetchProductData();
  fetchProductPriceData();
  fetchWebsiteConfigData();
  fetchKlineData();

  startDynamicsPriceUpdating();
  startTimeUpdating();

  chart = init("chart_box");
  chart.setStyles({
    // 网格线
    grid: {
      show: false
    },
    // 十字光标
    crosshair: {
      show: true,
      // 十字光标水平线及文字
      horizontal: {
        show: true,
        line: {
          show: true,
          // 'solid'|'dash'
          style: 'dash',
          dashValue: [4, 2],
          size: 1,
          color: '#888888'
        },
        text: {
          show: true,
          color: '#D9D9D9',
          size: 12,
          family: 'Helvetica Neue',
          weight: 'normal',
          paddingLeft: 2,
          paddingRight: 2,
          paddingTop: 2,
          paddingBottom: 2,
          borderSize: 1,
          borderColor: '#505050',
          borderRadius: 2,
          backgroundColor: '#505050'
        }
      },
      // 十字光标垂直线及文字
      vertical: {
        show: true,
        line: {
          show: true,
          // 'solid'|'dash'
          style: 'dash',
          dashValue: [4, 2],
          size: 1,
          color: '#888888'
        },
        text: {
          show: true,
          color: '#D9D9D9',
          size: 12,
          family: 'Helvetica Neue',
          weight: 'normal',
          paddingLeft: 2,
          paddingRight: 2,
          paddingTop: 2,
          paddingBottom: 2,
          borderSize: 1,
          borderColor: '#505050',
          borderRadius: 2,
          backgroundColor: '#505050'
        }
      }
    }
  });
  chart.createIndicator("VOL");
  chart.createIndicator('MA', false, {id: 'candle_pane'})
  chart.applyNewData(klineData.value);
})

// 清除定时器，防止内存泄漏
onBeforeUnmount(() => {
  clearInterval(intervalCountdownId.value); //当倒计时结束时清除定时器
  clearInterval(intervalDynamicsPriceId.value);
  clearInterval(intervalTimeId.value);
});
</script>

<template>
  <div class="product-detail">
    <div class="price">
      <div class="price-left">
        <span v-if="dynamicsPrice.zhangdie > 0" style="color: red;">{{ dynamicsPrice.price }}</span>
        <span v-else style="color: green;">{{ dynamicsPrice.price }}</span>
      </div>
      <div class="price-right" v-if="dynamicsPrice.zhangdie > 0">
        <span style="color: red">{{ dynamicsPrice.zhangdie }}</span>
        <span style="color: red;">{{ dynamicsPrice.zhangfu }}%</span>
      </div>
      <div class="price-right" v-else>
        <span style="color: green">{{ dynamicsPrice.zhangdie }}</span>
        <span style="color: green;">{{ dynamicsPrice.zhangfu }}%</span>
      </div>
    </div>
    <div class="mzmd">
      <div class="mzmd-item" style="border-right: 1px solid #31313b;">
        <span>{{ $t('productDetail.maizhang') }}</span>
        <span style="color: #e25577">{{ dynamicsPrice.price }}</span>
        <span>{{ dynamicsPrice.maizhang }}</span>
      </div>
      <div class="mzmd-item">
        <span>{{ $t('productDetail.maidie') }}</span>
        <span style="color:#0dcc89;">{{ dynamicsPrice.price }}</span>
        <span>{{ dynamicsPrice.maidie }}</span>
      </div>
    </div>
    <ul class="mzmd-progress">
      <li :style="[{ width: dynamicsPrice.maizhangXhx + '%'}]" class="mzmd-progress-zhang"></li>
      <li :style="[{ width: dynamicsPrice.maidieXhx + '%'}]" class="mzmd-progress-die"></li>
    </ul>
    <div class="notice">
      <van-image width="15px" height="15px" :src="noticeImg"/>
      <Vue3Marquee>
        {{ websiteConfig.notice }}
      </Vue3Marquee>
    </div>
    <!-- K线图 -->
    <div class="charts">
      <div class="charts-time">
        <div
            v-for="(item) in klineTimes"
            @click="handleKlineTime(item)"
            :class="item.value == klineTimeActive ? 'kline-time-active' : ''"
        >{{ item.label }}
        </div>
      </div>
      <div id="chart_box" style="height: 550px;"></div>
    </div>
    <!-- 底部按钮 -->
    <div class="btn">
      <div style="width: 20%" @click="toOrder()">
        <van-icon name="balance-list-o" size="24"/>
        <span>{{ $t('productDetail.order') }}</span>
      </div>
      <div style="background-color: #d83f4e;color: #000000;width: 40%" @click="showPlaceOrder(1)">
        <van-icon name="cash-back-record-o" size="24"/>
        <span>{{ $t('productDetail.maizhang') }}</span>
      </div>
      <div style="background-color: #1fc65b;color: #000000;width: 40%" @click="showPlaceOrder(2)">
        <van-icon name="cash-back-record-o" size="24"/>
        <span>{{ $t('productDetail.maidie') }}</span>
      </div>
    </div>

    <!-- 弹窗 -->
    <div v-if="placeOrderState" class="place-order-dialog">
      <div class="place-order-box">
        <!-- 下单弹窗 Step1 -->
        <div class="place-order-step1" v-if="step1">
          <div class="order-title">
            <span>{{ $t('productDetail.orderConfirm') }}</span>&nbsp;&nbsp;&nbsp;
            <span>{{ currentDate }}&nbsp;{{ currentTime }}</span>
            <van-icon name="cross" style="float: right" @click="closePlaceOrder"/>
          </div>
          <div style="padding: 10px;">
            <div class="order-time">
              <div class="order-title2">{{ $t('productDetail.endTime') }}</div>
              <div class="order-time-content">
                <div v-for="(item,index) in orderTimes"
                     :class="['order-time-item',{'order-time-active':form.time == item}]"
                     @click="handleOrderTime(item,orderScales[index])">
                  <span>{{ $t('productDetail.settlementTime') }}</span>
                  <div>
                    <span style="color: #fdbe19;font-size: 28px;font-weight: bold">{{ item * 60 }}</span>
                    <span style="color:#fdbe19;font-size:14px;">{{ $t('productDetail.second') }}</span>
                  </div>
                  <div>
                  <span style="color: red;font-size: 14px;">{{
                      $t('productDetail.magnification')
                    }}&nbsp;{{ orderScales[index] }}%</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-money">
              <div class="order-title2">{{ $t('productDetail.money') }}</div>
              <div class="order-money-content">
                <div v-for="item in orderMoneys" :class="['order-money-item',{'order-money-active':form.money == item}]"
                     @click="handleOrderMoney(item)">
                  <span>{{ item }}</span>
                </div>
              </div>
              <div style="display:flex;align-items: center; gap: 10px;margin-bottom: 5px;">
                <label style="width: 30%;">{{ $t('placeholder.buyMoneyEmpty') }}</label>
                <input
                    style="width: 70%;height:30px;border-radius:3px;background-color: #38373e;color: #ffffff;padding: 0 10px;"
                    :placeholder="$t('placeholder.buyMoneyEmpty')" v-model="form.money"/>
              </div>
              <div style="margin-bottom: 10px;display: flex;justify-content: space-between">
                <span>{{ $t('productDetail.balance') }}{{ $t('currency.symbol') }}{{ balance }}</span>
                <span>{{ $t('productDetail.platformFee') }}{{ websiteConfig.platform_fee }}%</span>
              </div>
            </div>
            <div class="order-info">
              <div>
                <span>{{ $t('productDetail.name') }}</span>
                <span style="color:#ffffff;">{{ product.product_name }}</span>
              </div>
              <div>
                <span>{{ $t('productDetail.direction') }}</span>
                <span v-if="form.type == 1" style="color:#fa2e42">{{ $t('productDetail.maizhang') }}</span>
                <span v-else style="color:#1fc65b">{{ $t('productDetail.maidie') }}</span>
              </div>
              <div>
                <span>{{ $t('productDetail.currentPrice') }}</span>
                <span style="color:#fa2e42" v-if="form.type == 1">{{ productData.price }}</span>
                <span style="color:#1fc65b" v-else>{{ productData.price }}</span>
              </div>
              <div>
                <span>{{ $t('productDetail.price') }}</span>
                <span style="color:#fdbe19">{{ $t('currency.symbol') }}{{ form.money }}</span>
              </div>
            </div>
            <div class="order-btn" @click="submit()">
              <span>{{ $t('productDetail.btn') }}</span>
            </div>
          </div>
        </div>
        <!-- 倒计时弹窗 Step2 -->
        <div class="place-order-step2" v-if="step2">
          <div class="order-title">
            <span style="color: #fdbe19">{{ product.product_name }}</span>
            <van-icon name="cross" style="float: right" @click="closePlaceOrder"/>
          </div>
          <div style="padding: 10px;">
            <div class="order-countdown">
              <div>
                <span style="font-size: 26px;font-weight: bold;">{{ countdown }}</span>
                <span style="font-size: 14px;color: #6d6d6d;">{{ $t('productDetail.currentPrice') }}</span>
                <span style="color:#fa2e42;font-size: 14px;">{{ dynamicsPrice.price }}</span>
              </div>
            </div>
            <div class="order-info">
              <div style="border-right: 1px solid #000">
                <span style="font-size: 12px;">{{ $t('productDetail.direction') }}</span>
                <span v-if="form.type == 1" style="color:#fa2e42">{{ $t('productDetail.maizhang') }}</span>
                <span v-else style="color:#1fc65b">{{ $t('productDetail.maidie') }}</span>
              </div>
              <div style="border-right: 1px solid #000">
                <span style="font-size: 12px;">{{ $t('productDetail.price') }}</span>
                <span style="color:#ffffff">{{ form.money }}</span>
              </div>
              <div>
                <span style="font-size: 12px;">{{ $t('productDetail.strikePrice') }}</span>
                <span style="color:#ffffff">{{ productData.price }}</span>
              </div>
            </div>
            <div class="order-btn">
              <div @click="continueOrder">{{ $t('productDetail.continueOrder') }}</div>
              <div @click="toOrder">{{ $t('productDetail.viewDetails') }}</div>
            </div>
          </div>
        </div>
        <!-- 成功弹窗 Step3 -->
        <div class="place-order-step3" v-if="step3">
          <div class="order-title">
            <span style="color: #fdbe19">{{ product.product_name }}</span>
            <van-icon name="cross" style="float: right" @click="closePlaceOrder"/>
          </div>
          <div class="order-success">
            <van-icon name="guide-o" size="30" color="#fdbe19"/>
            <span style="font-size: 20px;color: #ffffff;">{{ $t('productDetail.buySuccess') }}</span>
          </div>
          <div class="order-btn">
            <div @click="continueOrder">{{ $t('productDetail.continueOrder') }}</div>
            <div @click="toOrder">{{ $t('productDetail.viewDetails') }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="underlay"/>
</template>

<style scoped lang="less">
.product-detail {
  .price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid #31313b;
    padding: 10px 0;

    .price-left {
      font-weight: bold;
      font-size: 26px;
    }

    .price-right {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }

  .mzmd {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    .mzmd-item {
      display: flex;
      justify-content: space-between;
      flex: 1;
      padding: 0 10px;
      height: 30px;
      align-items: center;
      color: #74717c;
      font-weight: bold;
      font-size: 14px;
    }
  }

  .mzmd-progress {
    margin-top: -16px;

    li {
      display: inline-block;
    }

    .mzmd-progress-zhang {
      border-bottom: 2px solid #e25577;
    }

    .mzmd-progress-die {
      border-bottom: 2px solid #0dcc89;
    }
  }

  .notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #7f7e8e;
    padding: 0 10px;
    font-size: 14px;
  }

  .charts {
    .charts-time {
      display: flex;
      justify-content: space-around;
      font-size: 14px;
      background-color: #252529;
      color: #737373;
      height: 40px;
      line-height: 40px;

      div {
        flex: 1;
        text-align: center;
      }
    }
  }

  .btn {
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
    z-index: 1;
    background-color: #353539;
    color: #ffffff;
    font-size: 14px;

    div {
      display: flex;
      gap: 5px;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
  }

  .place-order-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(left top, rgba(255, 177, 0, 0.49), rgba(0, 161, 255, 0.76));
    z-index: 100;
    display: flex;
    align-items: center;

    .place-order-box {
      padding: 10px;
      width: 90%;
      margin: 0 auto;
      background-color: #1b1a1e;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 10px;
      color: #6D6D6D;
      font-size: 12px;

      .place-order-step1 {
        .order-title {
          border-bottom: 1px solid #000;
          color: #ffffff;
          padding: 15px;
          text-align: center;
          font-size: 14px;
        }

        .order-title2 {
          margin-bottom: 12px;
        }

        .order-time-content {
          display: flex;
          gap: 10px;
          margin-bottom: 10px;
          overflow-x: auto;

          .order-time-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
            align-items: center;
            font-size: 12px;
            background-image: url('../../assets/images/clock.png');
            background-size: contain;
            background-color: #2c2d31;
            border-radius: 5px;
            box-sizing: border-box;
            width: 90px;
            height: 85px;
            flex-shrink: 0;
          }
        }

        .order-money {
          border-bottom: 1px solid #333235;

          .order-money-content {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            overflow-x: auto;

            .order-money-item {
              background-color: #38373e;
              border-radius: 3px;
              color: #ffffff;
              padding: 3px 10px;
            }
          }
        }

        .order-info {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          margin-top: 10px;
          margin-bottom: 10px;

          div {
            display: flex;
            flex-direction: column;
            gap: 5px;
            align-items: center;
            flex: 1;
          }
        }

        .order-btn {
          height: 40px;
          line-height: 40px;
          color: #000000;
          font-size: 16px;
          text-align: center;
          background-color: #fdbe19;
          border-radius: 5px;
        }
      }

      .place-order-step2 {
        .order-title {
          border-bottom: 1px solid #000;
          padding: 15px;
          text-align: center;
          font-size: 14px;
        }

        .order-countdown {
          display: flex;
          justify-content: center;
          padding: 10px 0;
          border-bottom: 1px solid #000;

          div {
            height: 120px;
            width: 120px;
            border-radius: 50%;
            border: 2px solid #fdbe19;
            text-align: center;
            color: #fdbe19;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
          }
        }

        .order-info {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          margin-top: 10px;
          margin-bottom: 15px;

          div {
            display: flex;
            flex-direction: column;
            gap: 5px;
            align-items: center;
            flex: 1;
          }
        }

        .order-btn {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          gap: 5px;
          color: #000000;

          div {
            flex: 1;
            height: 40px;
            background-color: #fdbe19;
            border-radius: 5px;
            line-height: 40px;
            text-align: center;
          }
        }
      }

      .place-order-step3 {
        .order-title {
          border-bottom: 1px solid #000;
          padding: 15px;
          text-align: center;
          font-size: 14px;
        }

        .order-success {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 30px 0 70px 0;
        }

        .order-btn {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          gap: 5px;
          color: #000000;

          div {
            flex: 1;
            height: 40px;
            background-color: #fdbe19;
            border-radius: 5px;
            line-height: 40px;
            text-align: center;
          }
        }
      }
    }
  }


  .kline-time-active {
    color: #fdbe19 !important;
    border-bottom: 1px solid #fdbe19 !important;
  }

  .order-time-active {
    border: 1px solid #fdbe19 !important;
  }

  .order-money-active {
    color: #fdbe19 !important;
    border: 1px solid #fdbe19 !important;
  }


  //.order-dialog {
  //  position: fixed;
  //  top: 0;
  //  left: 0;
  //  width: 100%;
  //  height: 100%;
  //  background: -webkit-linear-gradient(left top, rgba(255, 177, 0, 0.49), rgba(0, 161, 255, 0.76));
  //  z-index: 100;
  //  display: flex;
  //  align-items: center;
  //
  //  .order {
  //    width: 90%;
  //    margin: 0 auto;
  //    background-color: #1b1a1e;
  //    position: fixed;
  //    top: 50%;
  //    left: 50%;
  //    transform: translate(-50%, -50%);
  //    border-radius: 10px;
  //    color: #6D6D6D;
  //    font-size: 12px;
  //
  //    .order-title {
  //      border-bottom: 1px solid #000;
  //      color: #ffffff;
  //      padding: 15px;
  //      text-align: center;
  //      font-size: 14px;
  //    }
  //
  //    .order-title2 {
  //      margin-bottom: 10px;
  //    }
  //
  //    .order-time-block {
  //      display: flex;
  //      gap: 10px;
  //      margin-bottom: 10px;
  //      overflow-x: auto;
  //
  //      .order-time-item {
  //        display: flex;
  //        flex-direction: column;
  //        gap: 5px;
  //        align-items: center;
  //        font-size: 12px;
  //        background-image: url('../../assets/images/clock.png');
  //        background-size: contain;
  //        background-color: #2c2d31;
  //        border-radius: 5px;
  //        box-sizing: border-box;
  //        width: 90px;
  //        height: 85px;
  //        flex-shrink: 0;
  //      }
  //    }
  //
  //    .order-money {
  //      border-bottom: 1px solid #333235;
  //
  //      .order-money-block {
  //        display: flex;
  //        gap: 10px;
  //        margin-bottom: 10px;
  //        overflow-x: auto;
  //
  //        .order-money-item {
  //          background-color: #38373e;
  //          border-radius: 3px;
  //          color: #ffffff;
  //          padding: 3px 10px;
  //        }
  //      }
  //    }
  //
  //    .order-info {
  //      display: flex;
  //      justify-content: space-between;
  //      font-size: 14px;
  //      margin-top: 10px;
  //      margin-bottom: 10px;
  //
  //      div {
  //        display: flex;
  //        flex-direction: column;
  //        gap: 5px;
  //        align-items: center;
  //      }
  //    }
  //
  //    .order-btn {
  //      height: 40px;
  //      line-height: 40px;
  //      color: #ffffff;
  //      font-size: 16px;
  //      text-align: center;
  //      background-color: #fdbe19;
  //      border-radius: 10px;
  //    }
  //  }
  //}
  //
  //.time-active {
  //  border: 1px solid #fdbe19 !important;
  //}
  //
  //.money-active {
  //  border: 1px solid #fdbe19 !important;
  //}
}
</style>